
import styled from 'styled-components';
import logoIcon from '../../statics/logo.png'

export const HeaderWapper = styled.div`
  position:relative;
  height:58px;
  z-index:1;
  border-bottom:1px solid #f0f0f0 ;
  min-width: 768px;
    max-width: 1440px;
    margin: 0 auto;
`
export const Logo = styled.div`
  height:56px;
  width:100px;
  display:block;
  position:absolute;
  top:0;
  left:0;
  background:url(${logoIcon});
  background-size:contain;
`


export const Nav = styled.div`
  width:960px;
  height:100%;
  margin:0 auto;
  padding-right:70px;
  box-sizing:border-box

`

export const NavItem = styled.div`
  line-height:56px;
  padding:0 15px;
  font-size:17px;
  color:#333;
  &.left{
     float:left
  }
  &.right{
    float:right;
    color:#969696
  }
  &.active{
   color:#ea5f6a
  }
`

export  const SearchWarpper = styled.div`
   float:left;
   position:relative;
   .zoom{
    position:absolute;
    bottom:5px;
    right:5px;
    width:30px;
    line-height:30px;
    text-align:center;
    border-radius:15px;
    color:#999;
    &.focused{
      background:#777;
      color:#fff;
    }
   }
`;
export const NavSreach = styled.input.attrs(
    {placeholder:"搜索"}
)`
  width:160px;
  height:38px;
  border-radius:40px;
  padding: 0 40px 0 20px;
  box-sizing:border-box;
  margin-left:20px;
  margin-top:9px;
  font-size: 14px;
  outline:none;
  border:1px solid #eee;
  background:#eee
  &::placeholder{
    color:#999
  }
  &.focused{
    width:260px;
  }
   &.slide-enter{
   width:160px
   transition:all 0.2s ease-out
   }
   &.slide-enter-active{
     width:260px;
   }
   &.slide-exit{
   transition:all 0.2s ease-out
   }
   &.slide-exit-active{160px}
`;


export  const Addition = styled.div`
   position:absolute;
   right:0;
   top:0;
   height：56px;

`;
export const Button = styled.div`
   float:right;
   margin-top:9px;
   margin-right:20px;
   padding:0 24px;
   line-height:38px;
   border-radius:19px;
   border:1px solid #ea6f5a;
   font-size:14px;
   &.reg{
   color:#ea6f5a;
   }
   &.wrtiing{
   color:#fff;
   background:#ea6f5a
   }
`;

export const SearchInfo = styled.div`
   position:absolute;
   left:0;
   top:56px;
   width:240px;
   padding:0 20px;
   background:#fff;
   box-shadow:0 0 8px rgba(0,0,0,0.2)
`;
export const SearchInfoTitle = styled.div`
   margin-top:20px;
   margin-bottom:15px;
   line-height:20px;
   font-size:14px;
   color:#969696
`;


export const SearchInfoSwitch = styled.span`
   font-size:13px;
   float:right;
   .spin{
     font-size:12px;
     margin-right:5px;
     display:block;
     float:left;
     transition:all 0.2s ease-in;
     transform:rotate(0deg);
     transform-origin:center center;
   }
`;

export const SearchInfoList = styled.div`
   
`;
export const SearchInfoItem = styled.a`
   font-size:12px;
   padding:0 5px;
   border:1px solid #ddd;
   line-height:20px;
   color:#787878;
   border-radius:3px;
   cursor:pointer;
   display:block;
   float:left;
   margin-right:10px;
   margin-bottom:10px;
   &:hover{
    color:#333;
   }
`;